<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="../include/header.jsp" %>        
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function recipe_select(no){
	var recipe_idx = $("#cls_recipe"+no).val();
	var param = "recipe_idx="+recipe_idx;
	$.ajax({
		type:"post",
		url:"${path}/recipe/recipe_info.do",
		data:param,
		success:function(msg){
			$("#div_recipe_selected"+no).html(msg);
		}
	});
}

function select_date(date){
	$("#cls_date").val(date);
}

Date.prototype.toDateInputValue = (function() {
    var local = new Date(this);
    local.setMinutes(this.getMinutes() - this.getTimezoneOffset() );
    return local.toJSON().slice(0,10);
});

function class_insert(){
	var subject = $("#cls_subject").val();
	var class_date = $("#cls_date").val();
	var content = $("#cls_content").val();
	var recipe_idx1 = $("#cls_recipe1").val();
	var recipe_idx2 = $("#cls_recipe2").val();
	if( subject.length == 0){
		alert("제목을 입력하세요");
		return;
	}
	if( class_date.length == 0){
		alert("개설 일자를 선택하세요");
		return;
	}
	if( content.length == 0){
		alert("강좌 내용을 입력하세요");
		return;
	}
	if( recipe_idx1 == null){
		alert("적어도 하나의 강좌는 선택해야 합니다");
		return;
	}
	if( recipe_idx1 == recipe_idx2){
		alert("두 강좌는 서로 달라야 합니다");
		return;
	}
	var param = "?subject="+subject
	+"&class_date="+class_date
	+"&content="+content
	+"&recipe_idx1="+recipe_idx1
	+"&recipe_idx2="+recipe_idx2
	+"&userid=${sessionScope.userid}";
	
	location.href="${path}/class1/class1_insert.do"+param;
}
</script>



<script type="text/javascript">
$(document).ready(function(){
	calendar(0,0,0);
});

function preYear(y,m,d){
	$('#calendar ul').remove();
	$('#calendar table').remove();
	calendar(y-1,m,d);
}

function nextYear(y,m,d){
	$('#calendar ul').remove();
	$('#calendar table').remove();
	calendar(y+1,m,d);
}

function preMonth(y,m,d){
	var thisMonth = String(new Date().toDateInputValue()).substr(0,7);
	var calMonth;
	if(m < 9){
		calMonth = String(y)+"-0"+String(m+1);
	}else{
		calMonth = String(y)+"-"+String(m);
	}
	if( thisMonth == calMonth){
		return;
	}
	$('#calendar ul').remove();
	$('#calendar table').remove();
	if(d == 99){
		d = 1;
	}
	if((m-1) == -1){
		y = y-1;
		m = 12;
	}
	calendar(y,m-1,d);
}

function nextMonth(y,m,d){
	$('#calendar ul').remove();
	$('#calendar table').remove();
	if(d == 99){
		d = 1;
	}
	if((m+1) == 12){
		y = y+1;
		m = -1;
	}
	calendar(y,m+1,d);
}
//////////////////
function calendar(y,m,d)
{
	  var date = new Date();
	  var now = new Date();
	  var day = date.getDate();
	  if(y != 0){ //입력받은 년,월 정보로 date객체의 년,월 정보를 수정(day는 today 표시를 하지 않기위해 임의로 99로 지정함)
		  date.setFullYear(y);
		  if(m < 0){
			  m = 12;
		  }
		  date.setMonth(m);
		  date.setDate(1);
		  day = 99;
	  }

	  if(y != 0 && now.getMonth() == m && y == now.getFullYear()){ //현재 년월과 입력받은 년월이 같을때 date값은 오늘 날짜로 지정해서 today class설정이 되도록 한다.
		  day = now.getDate();
	  }
	  var month = date.getMonth();
	  var year = date.getYear();
	  var docu ="";	  
	  if(year<=200)
	  {
	          year += 1900;
	  }
	  var months = new Array('01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12');
	  var days_in_month = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
	  if(year%4 == 0 && year!=1900) //윤년
	  {
	          days_in_month[1]=29;
	  }
	  total = days_in_month[month];
	  var date_today = year+'-'+months[month];
	  var beg_j = date;
	  /////////////
	  var param = "date="+date_today;
	  $.ajax({
		  type:"post",
		  url:"${path}/class1/class1_date_list.do",
		  data:param,
		  success:function(msg){
			  msg = msg.replace("[","");
			  msg = msg.replace("]","");
			  var dateArr = msg.split(",");
			  beg_j.setDate(1);
			  if(beg_j.getDate()==2)
			  {
			          beg_j=setDate(0);
			  }
			  beg_j = beg_j.getDay();	  
			  //docu+='<div style="width:100%;text-align:center;"><a href="#" onclick="preYear('+year+','+month+','+day+');" title="작년 ">◀ </a><a href="#" onclick="preMonth('+year+','+month+','+day+');" title="이전달">◁ </a>['+date_today+'월]<a href="#" onclick="nextMonth('+year+','+month+','+day+');" title="다음달"> ▷</a><a href="#" onclick="nextYear('+year+','+month+','+day+');" title="내년"> ▶</a></div>';
			  docu+='<div style="width:100%;text-align:center;"><text style="cursor:hand; font-weight:bold; color:#68228B;" onclick="preMonth('+year+','+month+','+day+');" title="이전달">◀ </text>['+date_today+'월]<text href="#" style="cursor:hand; font-weight:bold; color:#68228B;" onclick="nextMonth('+year+','+month+','+day+');" title="다음달"> ▶</text></div>';
			  docu+='<table class="calTable" summary="일정" border="1" style="border:solid black; width: 380px;height:220px; margin:0 auto;"><colgroup><col width="15%" /><col width="14%" /><col width="14%" /><col width="14%" /><col width="14%" /><col width="14%" /><col width="15%" /></colgroup><thead><tr><th class="weekSun"><font color="red">일</font></th><th>월</th><th>화</th><th>수</th><th>목</th><th>금</th><th class="weekSat"><font color="blue">토</font></th></tr></thead>';
			  week = 0;
			  for(var i=1;i<=beg_j;i++)
			  {
			          docu+='<th style=" background-color:#F0FFFF;"></th>';
			          week++;
			  }
			  outerfor:
			  for(var i=1;i<=total;i++)
			  {
				  
			          if(week==0)
			          {
			                  docu+='<tr>';
			          }
			          if(day+7>=i && day!=99)
			          {	
			                  docu+='<th class="today" style="background-color:#4F4F4F ; color:white;">'+i+'</th>';			        	  		

			          }
			          else // 날짜 뿌려 주는 코드
			          {
						  for(var j=0;j<=dateArr.length-1;j++){
							  if(i == parseInt(dateArr[j])  ){
					        	  		if(week==0){
					    	          		docu+='<th style="background-color:#FF7F50;" class="weekSun"><font color="red">'+i+'</font></th>';
					    	          	}else if(week==6){
					    	          		docu+='<th style="background-color:#FF7F50;" class="weekSat"><font color="blue">'+i+'</font></th>';
					    	          	}else{
					    	          		docu+='<th style="background-color:#FF7F50;">'+i+'</th>';
					    	          	}
					        	  		week++;
					        	  		if(week==7)
								     {
								            docu+='</tr>';
								             week=0;
								     }
					        	  		continue outerfor;
							  }			  
						  }
						 var select_day;
						 if( i<10){
							 select_day = "'"+date_today+"-0"+i+"'"; 
						 }else{
						 	select_day = "'"+date_today+"-"+i+"'";							 
						 }
						 
						 
						 if(week==0){
		    	          		docu+='<th class="weekSun"><input type="button" value="'+i+'" onclick="select_date('+select_day+')" style="color:red; background-color:#8DEEEE; font-weight:bold; height:100%; width:100%;"  /></th>';
		    	          	}else if(week==6){
		    	          		docu+='<th class="weekSat"><input type="button" value="'+i+'" onclick="select_date('+select_day+')" style="color:blue; background-color:#8DEEEE; font-weight:bold; height:100%; width:100%;"  /></th>';
		    	          	}else{
		    	          		docu+='<th><input type="button" value="'+i+'" onclick="select_date('+select_day+')" style="background-color:#8DEEEE; font-weight:bold; height:100%; width:100%;"  /></th>';
		    	          	}							  
			          }
			          week++;
			          if(week==7)
			          {
			                  docu+='</tr>';
			                  week=0;
			          }
			  }
			  for(var i=1;week!=0;i++)
			  {
			          docu+='<th style=" background-color:#F0FFFF;"></th>';
			          week++;
			          if(week==7)
			          {
			                  docu+='</tr>';
			                  week=0;
			          }
			  }
			  docu+='</tbody></table>';		
			  $('#calendar').html(docu);
			  return true;
		  }		  
	  })	;	
	  return true;
}
</script>

</head>
<body>
	<table border="1"   style="margin:10 auto; width: 100%;">
		<tr >
			<th width="70%">수강 개설 Page</th>
			<th >${sessionScope.userid}님의 강좌</th>			
		</tr>
		<tr>
			<th colspan="2">				
				<table  border="1" style="border:solid black; margin:5 auto; height:30px; width:90%;  background-color:#eeeeee;">
					<tr style="background-color: black; color: white;">
						<th width="30%">Subject</th>
						<th>
							<input type="text" id="cls_subject" name="cla_subject" size="100%">
						</th>
					</tr>
				</table>				
			</th>
		</tr>
		<tr>
			<th colspan="2" style="height: 350px;">
				<table border="1" style="border:solid black; margin:0 auto; width: 90%; height:90%; " >
					<tr style="color: white; background-color: #444444;" >
						<th width="55%" height="30px;">
							Choose Class Date
						</th>
						<th>
							Content
						</th>						
					</tr>
					<tr>
						<th >
							${map.classDateList }
							<div  id="calendar"  >
								<!-- 날짜 선택 -->							
							</div>
							<font style="color:#FF7F50; font-weight: bold;">[■ 개설불가]</font>
							<input type="date"  readonly="readonly" id="cls_date" name="cls_date"
							style="font-weight: bold;">							
							<font style="color:#8DEEEE; font-weight: bold;">[■ 개설가능]</font>
						</th>
						<th>
							<form>
							<textarea rows="13" cols="55" id="cls_content" name="cls_content"></textarea>
							<br><input type="reset" value="RESET">
							</form>							
						</th>						
					</tr>
					<tr>
					</tr>
				</table>			
			</th>
		</tr>
			<!--  관리자 모드 
		<c:if test="${sessionScope.level == 0 }">
		<tr>
		<th colspan="2" height="60">
			<table border="1" style="margin:0 auto; width: 90%; height:90%; ">
				<tr>
					<th width="25%">개설 상태</th>
					<th width="25%">${map.dto.state }</th>
					<th width="25%">
						<input type="text" id="cls_price" name="cls_price">원
					</th>
					<th width="25%">
						<input type="button" value="설정/변경"
						onclick="class_price_setting()">
					</th>
				</tr>					
			</table>
		</th>
	</tr>
	</c:if>
	-->
	<tr>
		<th colspan="2" height="250">
			<table border="1" style="border:solid black;margin:0 auto; width: 90%; height:90%; ">
				<tr style="color: white; background-color: #444444;">
					<th colspan="2" width="50%" height="20">RECIPE 1</th>
					<th rowspan="2" width="5"></th>
					<th colspan="2" width="50%">RECIPE 2</th>
				</tr>
				<tr>
					<th  >
						<div id="div_recipe_selected1" style="line-height:200px; margin:0 auto; height:100%; width:100% ">
							Recipe1 Info
						</div>
					</th>					
					<th width="20%">
						<select id="cls_recipe1" name="cls_recipe1" size="5" style="width: 100%; height: 100%;"
						onchange="recipe_select(1)">
							<c:forEach var="row" items="${map.recipeList }">
								<option value="${row.idx }">
									${row.subject }[
									<c:forEach begin="1" end="${row.rate }">
										★
									</c:forEach> ]
								</option>
							</c:forEach>
						</select>	
					</th>
					<th  >
						<div id="div_recipe_selected2" style="line-height:200px; margin:0 auto; height:100%; width:100% ">
							Recipe2 Info
						</div>					
					</th>					
					<th width="20%" >
						<select id="cls_recipe2" name="cls_recipe2" size="5" style="width: 100%; height: 100%;"
						onchange="recipe_select(2)">
							<c:forEach var="row" items="${map.recipeList }">
								<option value="${row.idx }">
									${row.subject }[
									<c:forEach begin="1" end="${row.rate }">
										★
									</c:forEach> ]
								</option>
							</c:forEach>
						</select>			
					</th>
				</tr>				
			</table>	
		</th>
	</tr>
	<tr>
		<th colspan="2" height="60">
			<table border="1" style="border:solid black;margin:0 auto; width: 90%; height:90%; ">
				<tr>
					<th>
						<input type="button" value="강좌 개설" onclick="class_insert()"
						style="font-weight: bold; font-size:20px;  width: 150px; height: 95%;">

					</th>
				</tr>
			</table>			
		</th>
	</tr>
	</table>
</body>
</html>